<template>
	<view>
		<view class="pad-lr-40 mar-top-20 hetop">
			<view class="bgfff radius-16">
			<view class=" poRe top_view radius-16 display align-items">
				<view class="poRe over-hid height-100 width-100 display-sa align-items">
					<view class="">
						<view class="col-f fontSize-30 ml30">总销售额</view>
						<view class="fontSize-48 mar-top-20 col-f ml30">{{all_sales}}</view>
					</view>
					<view class="xian"></view>
					<view class="">
						<view class="col-f fontSize-30 ml30">本月销量额</view>
						<view class="fontSize-48 mar-top-20 col-f ml30">{{month_sales}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	<view class="bgfff hebottom pad-lr-30 pad-tb-30 over-hid">
		<view class="fontSize-32 display-sb align-items">
			<text>销售明细</text>
			<view class="display align-items" @click="openshowwin">
				<image src="/static/img/icon_shaixuanshijian.png" class="proudct-item-icon-24" mode=""></image>
				<view class="ml10 fontSize-28 col-6">筛选时间</view>
			</view>
		</view>
			<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="lower">
				<view class="scroll-view-item pad-tb-30 bordbottom display-sb align-items" v-for="item in list" :key="item.id">
					<view class="width-50">
						<view class="fontSize-28">{{item.pay_type}}</view>
						<view class="mar-top-6 fontSize-26 col-9">{{item.date_time}}</view>
					</view>
					<view class="fontSize-30">￥{{item.price}}</view>
				</view>
			</scroll-view>
	</view>
		<tm-drawer :width="300" :height="500" ref="calendarView" placement="bottom" hideHeader v-model:show="showWin3">
			<view class="pad-lr-30">
				<view class="text-align-center fontSize-32 mar-top-40">
					筛选时间
				</view>
				<view class="mar-top-40 display-sb align-items">
					<view class="pad-lr-24 pad-tb-20 radius-16 time_view fontSize-28 col-9" @click="openshow">{{sta||'开始时间'}}</view>
					~
					<view class="pad-lr-24 pad-tb-20 radius-16 time_view fontSize-28 col-9" @click="openshow">{{end||'开始时间'}}</view>
				</view>
				<view class="col-f text-align-center fontSize-32 radius-40 btn_qury" @click="_sales_index">
					查询
				</view>
			</view>
		</tm-drawer>
		<tm-drawer v-model:show="show" :height="900" hideHeader>
					<view class="pa-16">
						<tm-time-between  color="#2DB295" @confirm="confirm" :format="'YYYY-MM-DD'" :asyncModel="true"></tm-time-between>
					</view>
				</tm-drawer>
	</view>
</template>

<script lang="ts" setup>
import { onLoad } from '@dcloudio/uni-app';
// import {sales_index} from '@/utils/api'
import { ref } from 'vue';
onLoad((options)=>{
	_sales_index()
})
const showWin3= ref(false)
const show = ref(false)
const openshow = () =>{
	show.value = true
}
const openshowwin = () =>{
	showWin3.value = true
}
const confirm =(e) =>{
	sta.value = e[0].split(' ')[0]
	end.value = e[1].split(' ')[0]
	show.value = false
}
const sta = ref()
const end = ref()
const list = ref()
const all_sales= ref()
const month_sales= ref()
const _sales_index =() =>{
	sales_index({
		date:sta.value&&end.value?sta.value+'~'+end.value:''
	}).then(res=>{
		if(res.code==1){
			showWin3.value = false
			all_sales.value = res.data.all_sales
			month_sales.value = res.data.month_sales
			list.value = res.data.list
		}
	})
}
</script>

<style lang="scss">
@import 'salesdetails.scss';
</style>
